<template>
  <div>
    <el-card class="box-card">
      <el-form
        ref="formRef"
        :label-position="labelPosition"
        label-width="100px"
        :model="forms"
        :rules="rules"
      >
        <el-form-item label="品牌名称:" prop="name" width="200">
          <el-input v-model="forms.name" />
        </el-form-item>
        <el-form-item label="品牌首字母:" prop="firstLetter">
          <el-input v-model="forms.firstLetter" />
        </el-form-item>
        <el-form-item label="品牌LOGO:" prop="logo">
          <el-upload
            ref="uploadRef"
            v-model:file-list="fileList"
            class="upload-demo"
            multiple
            :limit="1"
            list-type="picture"
            action="blob:http://127.0.0.1:5173"
            :on-preview="handlePictureCardPreviewOne"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            :on-exceed="handleExceed"
          >
            <el-button type="primary">点击上传</el-button>

            <template #tip>
              <div class="el-upload__tip">
                只能上传jpg/png文件, 且不超过100kb
              </div>
            </template>
            <el-dialog v-model="dialogVisible">
              <img w-full :src="logoList" alt="Preview Image" />
            </el-dialog>
          </el-upload>
        </el-form-item>
        <el-form-item label="品牌专区大图:" prop="bigPic">
          <el-upload
            ref="uploadRefTwo"
            class="upload-demo"
            v-model:file-list="fileListTwo"
            multiple
            :limit="1"
            list-type="picture"
            action="http://127.0.0.1:5173/api/minio/upload"
            :on-preview="handlePictureCardPreview"
            :on-success="handleSuccessTwo"
            :on-exceed="handleExceedTwo"
          >
            <el-button type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                只能上传jpg/png文件, 且不超过100kb
              </div>
            </template>
            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </el-upload>
        </el-form-item>
        <el-form-item label="品牌故事:" prop="brandStory">
          <el-input
            v-model="forms.brandStory"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="排序:" prop="sort">
          <el-input v-model="forms.sort" />
        </el-form-item>
        <el-form-item label="是否显示:" prop="showStatus">
          <el-radio-group v-model="forms.showStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="品牌制造商:" prop="factoryStatus">
          <el-radio-group v-model="forms.factoryStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="large" @click="SubmitFn">
            提交
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import type {
  UploadFile,
  UploadFiles,
  UploadProps,
  UploadUserFile,
  UploadInstance,
  UploadRawFile,
} from "element-plus";
import { ElMessage, ElMessageBox, FormInstance, genFileId } from "element-plus";

import { useRouter, useRoute } from "vue-router";
import { ApiBrandId, ApiBrandUpdate } from "./api";
const router = useRouter();
const route = useRoute();
// logo的ref
const uploadRef = ref<UploadInstance>();
// 大图的ref
const uploadRefTwo = ref<UploadInstance>();
const fileList = ref<UploadUserFile[]>([]);
const fileListTwo = ref<UploadUserFile[]>([]);

const forms = ref<IBrandId>({
  bigPic: "",
  brandStory: "",
  factoryStatus: 0,
  firstLetter: "",
  logo: "",
  name: "",
  showStatus: 0,
  sort: 0,
  id: 0,
});
// 请求
if (route.query.id) {
  ApiBrandId(parseInt(route.query.id as string)).then((res) => {
    forms.value = res.data;
    fileList.value.push({ name: res.data.name, url: res.data.logo });
    fileListTwo.value.push({ name: res.data.name, url: res.data.bigPic });
  });
}

// logo图片预览
const logoList = ref<string>("");

// 大图片url
const dialogImageUrl = ref<string>("");

// 是否显示图片
const dialogVisible = ref<boolean>(false);

// 大图的 已上传的钩子
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};

// logo的 已上传的钩子
const handlePictureCardPreviewOne: UploadProps["onPreview"] = (uploadFile) => {
  logoList.value = uploadFile.url!;
  dialogVisible.value = true;
};
// 表单属性
const labelPosition = ref("right");

// 表单数据
const form = reactive<IBrandId>({
  bigPic: "",
  brandStory: "",
  factoryStatus: 0,
  firstLetter: "",
  logo: "",
  name: "",
  showStatus: 0,
  sort: 0,
  id: 0,
});

// 表单绑定的ref
const formRef = ref<FormInstance>();

// 表单判断规则
const rules = {
  name: [{ required: true, trigger: "blur", message: "请输入品牌名称" }],
  logo: [{ required: true, trigger: "change", message: "请输入品牌logo" }],
};
// 表单
const SubmitFn = () => {
  // 二次校验表单
  formRef.value?.validate((ok: boolean) => {
    if (ok) {
      ElMessageBox.confirm("是否提交数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        ApiBrandUpdate(parseInt(route.query.id as string), forms.value)
          .then((res) => {
            //   提示
            ElMessage.success("修改成功");
            // 跳转
            router.push("/pms/brand");
            //   清空表单
            formRef.value?.resetFields();
          })
          .catch(() => {});
      });
    } else {
      ElMessage.error("验证失败");
    }
  });
};

// logo 成功的钩子
const handleSuccess = (response: any, uploadFile: UploadFile) => {
  console.log(uploadFile);
  forms.value.logo = uploadFile.url! as string;
};
// 大图成功的钩子
const handleSuccessTwo = (
  response: any,
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  forms.value.bigPic = uploadFile.url! as string;
};
// 取消的钩子
const handleRemove = (uploadFile: UploadFile) => {
  forms.value.logo = "";
};
// logo覆盖前一个图片
const handleExceed = (files: File[]) => {
  uploadRef.value!.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  uploadRef.value!.handleStart(file);
  console.log(files);
};
// 大图的覆盖前一个图片
const handleExceedTwo = (files: File[]) => {
  uploadRefTwo.value!.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  uploadRefTwo.value!.handleStart(file);
  console.log(files);
};
</script>

<style scoped lang="less">
.box-card {
  margin: 20px auto;
  width: 800px;
  :deep(.el-form) {
    padding: 20px;
    margin: 10px auto;
  }
  :deep(.el-form-item__label) {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  :deep(.el-input) {
    padding: 5px 0;
  }
  :deep(.el-input__inner) {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
  }
}
</style>
